
<template>
  <div class="register">
    <my-head title="注册">
      <template #left>
        <div class="back" @click="gotobackall">
          <van-icon name="revoke" size="18" color="#ff5f16" />
        </div>
      </template>
    </my-head>
    <div class="rebox">
      <van-form @submit="onSubmit" @failed="onFailed" ref="form">
        <van-field
          v-model="form.password"
          :type="type"
          name="password"
          clearable
          left-icon="warn-o"
          label="密码"
          placeholder="密码"
          :rules="[
            { required: true, message: '请填写密码' },
            { pattern: reg.pwd, message: '请填写6-16位数字字母组合' },
          ]"
          :right-icon="type != 'password' ? 'eye-o' : 'closed-eye'"
          @click-right-icon="changeType"
          @blur="checkPassword"
        />
        <!-- 封装组件  work  -->
        <van-field
          v-model="form.dbpassword"
          :type="type1"
          name="dbpassword"
          clearable
          left-icon="warn-o"
          label="确认密码"
          placeholder="确认密码"
          :rules="[
            { required: true, message: '请填写确认密码' },
            { pattern: reg.pwd, message: '请填写6-16位数字字母组合' },
            {
              validator: validator,
              message: '两次密码不一致',
            },
          ]"
          :right-icon="type1 != 'password' ? 'eye-o' : 'closed-eye'"
          @click-right-icon="changeType1"
        />
        <div style="margin: 16px 0">
          <van-button block type="warning" native-type="submit"
            >确认密码</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast, Notify } from "vant";
export default {
  data() {
    return {
      form: {},
      type: "password",
      type1: "password",
    };
  },
  mounted() {
    this.ApiTest();
  },
  methods: {
    ApiTest() {
      // this.$axios.get("http://localhost:2116/msg")
      // .then(res=>{
      //     console.log(res)
      // })
      this.$ajax.apiTest().then((res) => {});
    },
    onSubmit(value) {
      console.log(value);
      // ajax
      // 注册
      // this.$axios.post("http://localhost:2116/user",value)
      // .then(res=>{
      // })

      // 先注册
      // 先判断用户名或者手机是否已经存在
      // 查得到说明已经注册
      // 不能查询说明没有注册
      this.$ajax
        .findUser({
          phone: value.phone, // 手机号唯一
        })
        .then((res) => {
          if (res.length > 0) {
            this.$toast("账号已经被注册,请重新输入账号");
          } else {
            this.$ajax.register(value).then((res) => {
              this.ShowSuccess("注册成功");
              this.form = {};
              //
              this.$router.push({
                name: "login",
                query: { username: value.username, phone: value.phone },
              });
            });
          }
        });
    },
    // 校验失败
    onFailed() {
      // Toast("请输入有效的注册信息")
      this.$notify({
        message: "请输入有效的注册信息",
        color: "#ad0000",
        background: "#ffe1e1",
      });
    },
    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    changeType1() {
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    // dbpasswor 正则判断
    validator(val) {
      if (this.reg.pwd.test(this.form.password)) {
        return val == this.form.password; // 密码2次一样
      }
    },
    checkPassword() {
      if (
        this.reg.pwd.test(this.form.password) &&
        this.reg.pwd.test(this.form.dbpassword)
      ) {
        // 调取 dbpassword 的正则
        this.$refs.form.validate("dbpassword");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  .rebox {
    padding: 15px;
  }
}
.mt20 {
  margin-top: 10px;
}
</style>